<template>
  <div class="home" :style="{'-webkit-overflow-scrolling': scrollMode,height:sysH+'px'}" data-device="ios">
    <div v-if="!showRoom">
      <!-- 顶部滚动图 -->
      <banner></banner>
      <!-- 公告通知 -->
      <notice ></notice>
      <!-- 娃娃机列表 -->
      <div class="maincontent" v-infinite-scroll="loadMore" infinite-scroll-disabled="nonext"
           infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <div class="conitem" v-for="(item, index) in list" :key="index" :id="item.id"
             :game_time="item.game_time" @click="goroom(item, $event)">
          <div class="imgclass">
            <img :src="item.ware_image"/>
            <div class="imgtag" v-if="item.game_mode==2"><img src="../assets/images/Infiniteindex.png"/></div>
          </div>
          <div class="textclass">
            <p class="_title">{{setTitle(item.ware_name, 9)}}</p>
            <p class="_detail">
              <label class="good-name">{{setTitle(item.name, 5)}}</label>
              <label>{{item.coin}}金币/次</label>
            </p>
            <p class="room-status">
              <label v-if="item.device_status==0"><span>空闲中</span></label>
              <label class="active" v-if="item.device_status==1"><span>游戏中</span></label>
            </p>
          </div>
        </div>
        <div class="is-bottom" v-if="nonext">
          ~到底啦，别拉啦~
        </div>
      </div>
      <foot :selected="1"></foot>
    </div>
    <room :roomInfo="room_info" :show="showRoom" ref="room" @close="closeRoom"></room>
  </div>
</template>

<script>
  import api from "@/assets/js/api";
  import Wx from "@/assets/js/weixin";
  import {systemConfig,setWxTitle} from '@/assets/js/utils';
  import {InfiniteScroll} from "mint-ui";
  import {Indicator} from "mint-ui";
  import {Toast} from "mint-ui";
  import banner from "@/components/banner";
  import notice from "@/components/notice2";
  import foot from "@/components/tabfoot2";
  import room from "./room-artqiyi";
  export default {
    data: function () {
      return {
        list: [],
        allLoaded: false,
        page: 1,
        scrollMode: "auto",
        sysH: "",
        imgs: [],
        nonext: false,
        isMobile: null,
        showRoom: false,
        room_info: {},
        loading: false,
      };
    },
    components: {
      InfiniteScroll: InfiniteScroll,
      foot: foot,
      banner: banner,
      notice: notice,
      Indicator: Indicator,
      room
    },
    beforeDestroy () {
      document.querySelector('body').scrollTop = 0;
    },
    created: function () {
      this.loadList();
      //自定义微信分享
      Wx.share();
      systemConfig(config => {
        let name = config.app_name.length <= 7 ? config.app_name : config.app_name.substr(0, 7) + '...'
        setWxTitle(name);
      });
    },
    mounted: function () {
      document.addEventListener('visibilitychange', e => {
        if (document.visibilityState == 'hidden') {
          if (this.$refs.room) {
            this.$refs.room.stopBgVoice();
          }
        } else {
          if (this.$refs.room) {
            this.$refs.room.continueBgVoice();
          }
        }
      });
    },
    methods: {
      closeRoom () {
        this.showRoom = false;
      },
      setTitle (str, num) {
        return str.length <= num ? str : str.substr(0, num) + '...'
      },
      goroom: function (room, e) {
        this.room_info = room;
        this.showRoom = true;
        this.$refs.room.setPlay();
        this.$refs.room.playBgVoice();
        e.preventDefault();
      },
      loadList: function () {
        setTimeout(() => {
          this.loading = false;
        }, 200);
        Indicator.open("加载中...");
        var smData = {
          page: this.page,
          per_page: 15
        };
        api.fetch("/api/machines", {params: smData}).then(res => {
          if (res.meta.pagination.per_page > res.meta.pagination.count) {
            this.nonext = true;
          }
          if (res.meta.pagination.count > 0) {
            if (this.page == 1) {
              this.list =[];
            }
            this.list = this.list.concat(res.data);
            this.$nextTick(() => {
              this.scrollMode = "touch";
            });
          }
          Indicator.close();
        }).catch(() => {
          Indicator.close();
        });
      },
      loadMore () {
        this.page++;
        this.loadList();
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .home {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    /*background-color: #7373ff;*/
    background-color: #ffffff;
    /*padding: 0.2rem 0.3rem 1rem;*/
    .is-bottom {
      height: 2.26rem;
      line-height: 2.26rem;
      text-align: center;
      width: 100%;
      font-size: 0.3rem;
      /*color: #fff;*/
      color: #000000;
    }
  .picker-item {
    transform: translateZ(0) rotateX(0);
  }
  .textclass {
    padding: 0.2rem 0.2rem 0.3rem;
  }
  .textclass ._title {
    font-size: 0.3rem;
    color: #333333;
    margin-bottom: 0.2rem;
    height: 0.32rem;
    overflow: hidden;
    white-space: nowrap;
    height: 0.32rem;
    line-height: 0.32rem;
  }
  .textclass ._detail img {
    vertical-align: middle;
    margin-right: 0.08rem;
  }
  .textclass ._detail {
    font-size: 0.24rem;
    height: 0.28rem;
    position: relative;
    color: #999;
  label {
    font-size: 0.24rem;
  }
  label:first-child {
    position: absolute;
    max-width: 1.44rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  label:nth-of-type(2) {
    background: url("../assets/images/coin-icon.png") no-repeat left center;
    background-size: 0.24rem;
    padding-left: 0.3rem;
    position: absolute;
    right: 0;
    white-space: nowrap;
  }
  }
  .textclass .room-status {
  label {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.72rem;
    height: 0.36rem;
    line-height: 0.36rem;
    text-align: center;
    background-color: #29c956;
    border-radius: 0.06rem;
    font-size: 0.2rem;
    color: #ffffff;
  &.active {
     background-color: #ff8b3d;
   }
  }
  }
  .imgclass,
  .imgclass img {
    width: 3.26rem;
    position: relative;
    height: 2.8rem;
    border-radius: 0.2rem 0.2rem 0 0;
  .imgtag {
    position: absolute;
    top: 0.14rem;
    width: 1.2rem;
    right: 0rem;
    height: 0.34rem;
    background: #ec6564;
    border-radius: 0.6rem 0rem 0rem 0.6rem;
    color: #fff;
    font-size: 0.2rem;
    text-align: center;
  i {
    background: url("../assets/images/infinite.png") no-repeat left center;
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background-size: 0.2rem;
    vertical-align: middle;
    margin-right: 0.05rem;
  }
  img {
    width: 1.2rem;
    height: 0.34rem;
  }
  }
  }
  .conitem {
    width: 3.3rem;
    margin-bottom: 0.3rem;
    background: #fff;
    border-radius: 0.2rem;
    position: relative;
    border: 1px solid #f0f0f0;
  }
  .maincontent {
    /*padding-top: 0.3rem;*/
    padding: 0.3rem 0.3rem 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .header {
    height: 0.68rem;
    background: #ec6564;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.1rem 0.28rem;
    align-items: center;
  }
  .header-title {
    color: #fff;
    font-size: 0.37rem;
    line-height: 0.68rem;
  }
  .header-left {
    width: 0.33rem;
    height: 0.4rem;
  }
  .header-left img,
  .header-right img {
    width: 100%;
    align-items: center;
  }
  .header-right {
    width: 0.36rem;
    height: 0.36rem;
  }
  }
</style>
